<template>
  <div class="box">
    <!-- <div style="width: 100%; height: 20px; background-color: #f6f6f6"></div> -->
    <div class="box-bj">
      <div class="box-top">立即开通 六度标讯 产品套餐</div>
    </div>
    <div class="mainBody">
      <div class="vip">
        <div class="vip-1" :class="{ checked: actives === 2 }" @click="changeStatus1(2)">
          <div v-if="actives == 2">
            <div class="vip-top1">
              <div style="display: flex; padding: 38px 0 0 194px">
                <div class="zuan">
                  <img src="../../assets/img/组 5816@2x.png" alt="" />
                </div>
                <div class="title">{{ name1 }}</div>
              </div>
              <div class="exclusive">专属区域标讯畅享</div>
            </div>
            <div class="radio">
              <div style="display: flex; justify-content: space-between">
                <!-- <div
                  class="qian"
                  :class="{ checkeds: active1 === 's' }"
                  @click="changeStatus('s')"
                >
                  <div class="qian-s">
                    <div class="qian-1">¥</div>
                    <div class="qian-2">{{ memberPrice3 }}</div>
                    <div class="qian-3">/{{ time(radio1) }}/省</div>
                  </div>
                  <div class="qian-ss">加订¥{{ huiyuanJd }}/省</div>
                  <div class="Selected" id="myElement">
                    <img src="../../assets/img/组 4921@2x.png" alt="" />
                  </div>
                </div> -->
                <div class="Selected" id="myElement">
                  <img src="../../assets/img/组 4921@2x.png" alt="" />
                </div>
                <div class="qian" :class="{ checkeds: active1 === 'q' }" @click="changeStatus('q')">
                  <div class="qian-s">
                    <div class="qian-1">¥</div>
                    <div class="qian-2">{{ memberPrice4 }}</div>
                    <div class="qian-3">/{{ time(radio1) }}/全国</div>
                  </div>
                  <div class="Selected" id="myElement">
                    <img src="../../assets/img/组 4921@2x.png" alt="" />
                  </div>
                </div>
                <div class="Selected" id="myElement">
                  <img src="../../assets/img/组 4921@2x.png" alt="" />
                </div>
              </div>
              <div class="content-left">
                <div class="content-1" style="line-height: 40px">
                  <div class="" style="lin">六度标讯业务区域：</div>
                  <el-select :disabled="disabled" multiple collapse-tags max-collapse-tags="2" collapse-tags-tooltip
                    v-model="cityList" class="m-2" placeholder="请选择省份" size="large" style="width: 240px"
                    @change="changeCity()">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div class="content-2">
                  <div class="city-1">已选省份：</div>
                  <div class="city-2" v-for="item in cityList" v-if="disabled !== 'true'">
                    <div class="city-3">{{ citys(item) }}</div>
                  </div>
                  <div class="city-2" v-for="item in cityList" v-else>
                    <div class="city-3"></div>
                  </div>
                </div>
                <div class="content-1">
                  <div class="city-1" style="line-height: 40px">选择时间：</div>
                  <div class="city-4">
                    <div style="display: flex; align-items: center">
                      <el-radio-group v-model="radio1" class="ml-[4px] flex-nowrap" style="flex-wrap: nowrap"
                        @change="changeTheme">
                        <el-radio :label="1" size="large">月</el-radio>
                        <el-radio :label="2" size="large">年</el-radio>
                      </el-radio-group>
                      <el-select v-model="digit" class="m-3" placeholder="" size="large" @change="changeTheme1">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                      <div style="margin-left: 10px; line-height: 40px">
                        {{ time(radio1) }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="content-1">
                  <div class="">开通账号：</div>
                  <div>15855573332</div>
                </div>
                <div class="content-1">
                  <div class="">开通套餐：</div>
                  <div>六度·{{ name1 }}</div>
                </div>
                <div class="content-1">
                  <div class="">到期时间：</div>
                  <div>{{ timestamp(expirationTime) }}</div>
                </div>
                <div class="content-1" style="display: flex; line-height: 40px">
                  <div class="">抵扣码：</div>
                  <div class="" style="color: red" v-if="xianshi == 1">
                    验证成功，抵扣{{ amount }}元
                  </div>
                  <div class="" style="display: flex">
                    <el-input v-model="input" class="w-50" placeholder="请输入抵扣码" />
                    <div class="qd" @click="postPrice()">验证</div>
                  </div>
                  <!-- </div> -->
                </div>
                <div class="content-1" v-if="xianshi == 1">
                  <div class="">原价金额：</div>
                  <div v-if="active1 == 's'" style="font-size: 14px; color: #ff4848; display: flex">
                    {{ memberPrice3 }}
                    <div>元</div>
                  </div>
                  <div v-else style="font-size: 14px; color: #ff4848; display: flex">
                    {{ memberPrice4 }}
                    <div>元</div>
                  </div>
                </div>
                <div class="content-1" v-if="xianshi == 2">
                  <div class="">实付金额：</div>
                  <div v-if="active1 == 's'" style="font-size: 22px; color: #ff4848; display: flex">
                    {{ memberPrice3 }}
                    <div>元</div>
                  </div>
                  <div v-else style="font-size: 22px; color: #ff4848; display: flex">
                    {{ memberPrice4 }}
                    <div>元</div>
                  </div>
                </div>
                <div class="content-1" v-if="xianshi == 1">
                  <div class="">实付金额：</div>
                  <div v-if="active1 == 's'" style="font-size: 22px; color: #ff4848; display: flex">
                    {{ memberPrice3 - amount }}
                    <div>元</div>
                  </div>
                  <div v-else style="font-size: 22px; color: #ff4848; display: flex">
                    {{ memberPrice4 - amount }}
                    <div>元</div>
                  </div>
                </div>
                <div class="activate">
                  <el-button @click.stop="JumpPayment()">立即开通</el-button>
                </div>
                <div class="agree">
                  <el-radio-group v-model="radio2" class="ml-[4px]">
                    <el-radio label="1" size="large">同意</el-radio>
                  </el-radio-group>
                  <div style="color: #f43107; font-weight: 400; line-height: 40px" @click="Jumpxy()">
                    《中国招标与采购网会员服务协议》
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="vip-top2">
              <div style="display: flex; padding: 22px 0 0 37px">
                <div class="zuan">
                  <img src="../../assets/img/组 5816@2x.png" alt="" />
                </div>
                <div class="title">{{ name1 }}</div>
              </div>
              <div class="exclusive">专属区域标讯畅享</div>
            </div>
            <div class="xiao">
              <div class="qian-s" style="margin-top: 80px">
                <div class="qian-1">¥</div>
                <div class="qian-2">{{ putong1 }}</div>
                <div class="qian-3">/{{ time(radio1) }}/全国</div>
              </div>
              <el-button class="kait">立即开通</el-button>
            </div>
          </div>
        </div>
        <div class="vip-1" :class="{ checked: actives === 3 }" @click="changeStatus1(3)">
          <div v-if="actives == 3">
            <div class="vip-top3">
              <div style="display: flex; padding: 38px 0 0 194px">
                <div class="zuan">
                  <img src="../../assets/img/组 5817@2x.png" alt="" />
                </div>
                <div class="title" style="color: #fff">{{ name2 }}</div>
              </div>
              <div class="exclusive" style="color: #fff">全国标讯任意查询</div>
            </div>
            <div class="radio">
              <div style="display: flex; justify-content: space-between">
                <!-- <div
                  class="qian"
                  :class="{ checkeds: active1 === 's' }"
                  @click="changeStatus('s')"
                >
                  <div class="qian-s">
                    <div class="qian-1">¥</div>
                    <div class="qian-2">{{ memberPrice3 }}</div>
                    <div class="qian-3">/{{ time(radio1) }}/省</div>
                  </div>
                  <div class="qian-ss">加订¥{{ huiyuanJd1 }}省</div>
                  <div class="Selected" id="myElement">
                    <img src="../../assets/img/组 4921@2x.png" alt="" />
                  </div>
                </div> -->
                <div class="Selected" id="myElement">
                  <img src="../../assets/img/组 4921@2x.png" alt="" />
                </div>
                <div class="qian" :class="{ checkeds: active1 === 'q' }" @click="changeStatus('q')">
                  <div class="qian-s">
                    <div class="qian-1">¥</div>
                    <div class="qian-2">{{ memberPrice4 }}</div>
                    <div class="qian-3">/{{ time(radio1) }}/全国</div>
                  </div>
                  <div class="Selected" id="myElement">
                    <img src="../../assets/img/组 4921@2x.png" alt="" />
                  </div>
                </div>
                <div class="Selected" id="myElement">
                  <img src="../../assets/img/组 4921@2x.png" alt="" />
                </div>
              </div>
              <div class="content-left">
                <div class="content-1" style="line-height: 40px">
                  <div class="" style="lin">六度标讯业务区域：</div>
                  <el-select :disabled="disabled" multiple collapse-tags max-collapse-tags="2" collapse-tags-tooltip
                    v-model="cityList" class="m-2" placeholder="请选择省份" size="large" style="width: 240px"
                    @change="changeCity()">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div class="content-2">
                  <div class="city-1">已选省份：</div>
                  <div class="city-2" v-for="item in cityList" v-if="disabled !== 'true'">
                    <div class="city-3">{{ citys(item) }}</div>
                  </div>
                  <div class="city-2" v-for="item in cityList" v-else>
                    <div class="city-3"></div>
                  </div>
                </div>
                <div class="content-1">
                  <div class="city-1" style="line-height: 40px">选择时间：</div>
                  <div class="city-4">
                    <div style="display: flex;align-items: center">
                      <el-radio-group v-model="radio1" class="ml-[4px] flex-nowrap" style="flex-wrap: nowrap"
                        @change="changeTheme">
                        <el-radio :label="1" size="large">月</el-radio>
                        <el-radio :label="2" size="large">年</el-radio>
                      </el-radio-group>
                      <el-select v-model="digit" class="m-3" placeholder="" size="large" @change="changeTheme1">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                      <div style="margin-left: 10px; line-height: 40px">
                        {{ time(radio1) }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="content-1">
                  <div class="">开通账号：</div>
                  <div>15855573332</div>
                </div>
                <div class="content-1">
                  <div class="">开通套餐：</div>
                  <div>六度·{{ name2 }}</div>
                </div>
                <div class="content-1">
                  <div class="">到期时间：</div>
                  <div>{{ expirationTime }}</div>
                </div>
                <div class="content-1" style="display: flex; line-height: 40px">
                  <div class="">抵扣码：</div>
                  <div class="" style="color: red" v-if="xianshi == 1">
                    验证成功，抵扣{{ amount }}元
                  </div>
                  <div class="" style="display: flex">
                    <el-input v-model="input" class="w-50" placeholder="请输入抵扣码" />
                    <div class="qd" @click="postPrice()">验证</div>
                  </div>
                  <!-- </div> -->
                </div>
                <div class="content-1" v-if="xianshi == 1">
                  <div class="">原价金额：</div>
                  <div v-if="active1 == 's'" style="font-size: 14px; color: #ff4848; display: flex">
                    {{ memberPrice3 }}
                    <div>元</div>
                  </div>
                  <div v-else style="font-size: 14px; color: #ff4848; display: flex">
                    {{ memberPrice4 }}
                    <div>元</div>
                  </div>
                </div>
                <div class="content-1" v-if="xianshi == 2">
                  <div class="">实付金额：</div>
                  <div v-if="active1 == 's'" style="font-size: 22px; color: #ff4848; display: flex">
                    {{ memberPrice3 }}
                    <div>元</div>
                  </div>
                  <div v-else style="font-size: 22px; color: #ff4848; display: flex">
                    {{ memberPrice4 }}
                    <div>元</div>
                  </div>
                </div>
                <div class="content-1" v-if="xianshi == 1">
                  <div class="">实付金额：</div>
                  <div v-if="active1 == 's'" style="font-size: 22px; color: #ff4848; display: flex">
                    {{ memberPrice3 - amount }}
                    <div>元</div>
                  </div>
                  <div v-else style="font-size: 22px; color: #ff4848; display: flex">
                    {{ memberPrice4 - amount }}
                    <div>元</div>
                  </div>
                </div>
                <div class="activate">
                  <el-button @click.stop="JumpPayment()">立即开通</el-button>
                </div>
                <div class="agree">
                  <el-radio-group v-model="radio2" class="ml-[4px]">
                    <el-radio label="1" size="large">同意</el-radio>
                  </el-radio-group>
                  <div style="color: #f43107; font-weight: 400; line-height: 40px">
                    《中国招标与采购网会员服务协议》
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="vip-top4">
              <div style="display: flex; padding: 22px 0 0 37px">
                <div class="zuan">
                  <img src="../../assets/img/组 5817@2x.png" alt="" />
                </div>
                <div class="title" style="color: #fff">{{ name2 }}</div>
              </div>
              <div class="exclusive" style="color: #fff">全国标讯任意查询</div>
            </div>
            <div class="xiao">
              <div class="qian-s" style="margin-top: 80px">
                <div class="qian-1">¥</div>
                <div class="qian-2">{{ gaoji1 }}</div>
                <div class="qian-3">/{{ time(radio1) }}/全国</div>
              </div>
              <el-button class="kait2">立即开通</el-button>
            </div>
          </div>
        </div>
        <div class="vip-1" :class="{ checked: actives === 4 }" @click="changeStatus1(4)">
          <div v-if="actives == 4">
            <div class="vip-top5">
              <div style="display: flex; padding: 38px 0 0 194px">
                <div class="zuan">
                  <img src="../../assets/img/组 5818@2x.png" alt="" />
                </div>
                <div class="title">{{ name3 }}</div>
              </div>
              <div class="exclusive">VIP更多权限任你用</div>
            </div>
            <div class="radio">
              <div style="display: flex; justify-content: space-between">
                <!-- <div
                  class="qian"
                  :class="{ checkeds: active1 === 's' }"
                  @click="changeStatus('s')"
                >
                  <div class="qian-s">
                    <div class="qian-1">¥</div>
                    <div class="qian-2">{{ memberPrice3 }}</div>
                    <div class="qian-3">/{{ time(radio1) }}/省</div>
                  </div>
                  <div class="qian-ss">加订¥{{ huiyuanJd2 }}/省</div>
                  <div class="Selected" id="myElement">
                    <img src="../../assets/img/组 4921@2x.png" alt="" />
                  </div>
                </div> -->
                <div class="Selected" id="myElement">
                  <img src="../../assets/img/组 4921@2x.png" alt="" />
                </div>
                <div class="qian" :class="{ checkeds: active1 === 'q' }" @click="changeStatus('q')">
                  <div class="qian-s">
                    <div class="qian-1">¥</div>
                    <div class="qian-2">{{ memberPrice4 }}</div>
                    <div class="qian-3">/{{ time(radio1) }}/全国</div>
                  </div>
                  <div class="Selected" id="myElement">
                    <img src="../../assets/img/组 4921@2x.png" alt="" />
                  </div>
                </div>
                <div class="Selected" id="myElement">
                  <img src="../../assets/img/组 4921@2x.png" alt="" />
                </div>
              </div>
              <div class="content-left">
                <div class="content-1" style="line-height: 40px">
                  <div class="" style="lin">六度标讯业务区域：</div>
                  <el-select :disabled="disabled" multiple collapse-tags max-collapse-tags="2" collapse-tags-tooltip
                    v-model="cityList" class="m-2" placeholder="请选择省份" size="large" style="width: 240px"
                    @change="changeCity()">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <div class="content-2">
                  <div class="city-1">已选省份：</div>
                  <div class="city-2" v-for="item in cityList" v-if="disabled !== 'true'">
                    <div class="city-3">{{ citys(item) }}</div>
                  </div>
                  <div class="city-2" v-for="item in cityList" v-else>
                    <div class="city-3"></div>
                  </div>
                </div>
                <div class="content-1">
                  <div class="city-1" style="line-height: 40px">选择时间：</div>
                  <div class="city-4">
                    <div style="display: flex; align-items: center">
                      <el-radio-group v-model="radio1" class="ml-[4px] flex-nowrap" style="flex-wrap: nowrap"
                        @change="changeTheme">
                        <el-radio :label="1" size="large">月</el-radio>
                        <el-radio :label="2" size="large">年</el-radio>
                      </el-radio-group>
                      <el-select v-model="digit" class="m-3" placeholder="" size="large" @change="changeTheme1">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                      <div style="margin-left: 10px; line-height: 40px">
                        {{ time(radio1) }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="content-1">
                  <div class="">开通账号：</div>
                  <div>15855573332</div>
                </div>
                <div class="content-1">
                  <div class="">开通套餐：</div>
                  <div>六度·{{ name3 }}</div>
                </div>
                <div class="content-1">
                  <div class="">到期时间：</div>
                  <div>2025-01-29</div>
                </div>
                <div class="content-1" style="display: flex; line-height: 40px">
                  <div class="">抵扣码：</div>
                  <div class="" style="color: red" v-if="xianshi == 1">
                    验证成功，抵扣{{ amount }}元
                  </div>
                  <div class="" style="display: flex">
                    <el-input v-model="input" class="w-50" placeholder="请输入抵扣码" />
                    <div class="qd" @click="postPrice()">验证</div>
                  </div>
                  <!-- </div> -->
                </div>
                <div class="content-1" v-if="xianshi == 1">
                  <div class="">原价金额：</div>
                  <div v-if="active1 == 's'" style="font-size: 14px; color: #ff4848; display: flex">
                    {{ memberPrice3 }}
                    <div>元</div>
                  </div>
                  <div v-else style="font-size: 14px; color: #ff4848; display: flex">
                    {{ memberPrice4 }}
                    <div>元</div>
                  </div>
                </div>
                <div class="content-1" v-if="xianshi == 2">
                  <div class="">实付金额：</div>
                  <div v-if="active1 == 's'" style="font-size: 22px; color: #ff4848; display: flex">
                    {{ memberPrice3 }}
                    <div>元</div>
                  </div>
                  <div v-else style="font-size: 22px; color: #ff4848; display: flex">
                    {{ memberPrice4 }}
                    <div>元</div>
                  </div>
                </div>
                <div class="content-1" v-if="xianshi == 1">
                  <div class="">实付金额：</div>
                  <div v-if="active1 == 's'" style="font-size: 22px; color: #ff4848; display: flex">
                    {{ memberPrice3 - amount }}
                    <div>元</div>
                  </div>
                  <div v-else style="font-size: 22px; color: #ff4848; display: flex">
                    {{ memberPrice4 - amount }}
                    <div>元</div>
                  </div>
                </div>
                <div class="activate">
                  <el-button @click.stop="JumpPayment()">立即开通</el-button>
                </div>
                <div class="agree">
                  <el-radio-group v-model="radio2" class="ml-[4px]">
                    <el-radio label="1" size="large">同意</el-radio>
                  </el-radio-group>
                  <div style="color: #f43107; font-weight: 400; line-height: 40px">
                    《中国招标与采购网会员服务协议》
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="vip-top6">
              <div style="display: flex; padding: 22px 0 0 37px">
                <div class="zuan">
                  <img src="../../assets/img/组 5818@2x.png" alt="" />
                </div>
                <div class="title">{{ name3 }}</div>
              </div>
              <div class="exclusive">VIP更多权限任你用</div>
            </div>
            <div class="xiao">
              <div class="qian-s" style="margin-top: 80px">
                <div class="qian-1">¥</div>
                <div class="qian-2">{{ Vip1 }}</div>
                <div class="qian-3">/{{ time(radio1) }}/全国</div>
              </div>
              <el-button class="kait3">立即开通</el-button>
            </div>
          </div>
        </div>
        <div class="vip-1" style="margin-right: 0" :class="{ checked: actives === 5 }" @click="changeStatus1(5)">
          <div v-if="actives == 5">
            <div class="vip-top7">
              <div style="display: flex; padding: 38px 0 0 194px">
                <div class="zuan">
                  <img src="../../assets/img/组 5819@2x.png" alt="" />
                </div>
                <div class="title">{{ name4 }}</div>
              </div>
              <div class="exclusive">套餐额度定制，专属解决方案</div>
            </div>
            <div class="radio">
              <div class="kfimg">
                <img :src="kfimg" alt="" />
              </div>
              <div class="kf-2">联系专属客服</div>
            </div>
          </div>
          <div v-else>
            <div class="vip-top8">
              <div style="display: flex; padding: 22px 0 0 37px">
                <div class="zuan">
                  <img src="../../assets/img/组 5819@2x.png" alt="" />
                </div>
                <div class="title">{{ name4 }}</div>
              </div>
              <div class="exclusive">套餐额度定制，专属解决方案</div>
            </div>
            <div class="xiao">
              <div class="qian-s" style="margin-top: 34px">
                <div class="kf">
                  <img src="../../assets/img/组 5821@2x.png" alt="" />
                </div>
              </div>
              <div class="kf-1">联系专属客服</div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog v-model="dialogVisible" width="15%" :before-close="handleClose">
        <div style="width: 100%; margin-left: 80px">
          <qrcode-vue :value="weChatPaymentCode" size:400></qrcode-vue>
        </div>

        <template #footer>
          <span class="dialog-footer">
          </span>
        </template>
      </el-dialog>

      <!-- 会员权益---表格 -->
      <div class="w padding">
        <div class="table_wrapper2">
          <div class="table-top">中国招标与采购网会员服务列表（2023版）</div>
          <table class="table_info" border="1" width="1120px">
            <tr style="height: 60px">
              <th class="member_normal" colspan="3">服务内容</th>
              <th class="member_normalss active_color">
                标准会员<br />（43）项
              </th>
              <th class="member_high">高级会员<br />（53）项</th>
              <th class="member_vip">VIP会员<br />（65）项</th>
              <th class="member_baijin">白金会员<br />（69）项</th>
              <th class="member_zuanshi">钻石会员<br />（76）项</th>
            </tr>
            <tr style="text-align: center">
              <th rowspan="12" style="width: 130px">招标服务<br />（12项）</th>
              <td colspan="2">01.招标预告</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">02.招标公告</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">03.中标结果</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">04.变更公告</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">05.国际招标</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">06.拍卖公告</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">07.企业采购</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">08.会员招标</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">09.会员求购</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">10.邀请招标</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">11.采招资讯</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td colspan="2">12.线上招标服务</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
          </table>
          <table border="1" width="1120px" style="margin-top: 10px; table-layout: fixed">
            <tr style="text-align: center">
              <th rowspan="5" style="width: 130px">项目服务<br />（5项）</th>
              <td style="width: 239px">01.业主委托项目</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>02.VIP独家项目</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.拟在建项目</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>04.优质项目推荐</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">05.项目唯一推荐</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip" style="width: 114px">1次</td>
              <td class="member_baijin" style="width: 114px">5次</td>
              <td class="member_zuanshi" style="width: 114px">10次</td>
            </tr>
          </table>
          <table border="1" width="1120px" style="margin-top: 10px; table-layout: fixed">
            <tr style="text-align: center">
              <th rowspan="5" style="width: 130px">专业服务<br />（5项）</th>
              <td style="width: 239px">01.特约项目查询</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">5次</td>
              <td class="member_vip">10次</td>
              <td class="member_baijin">15次</td>
              <td class="member_zuanshi">20次</td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 150px">02.独家项目监测</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.项目汇总导出</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>04.重点投资项目排期</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">05.专属团队项目监测</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high" style="width: 114px">---</td>
              <td class="member_vip" style="width: 114px">---</td>
              <td class="member_baijin" style="width: 114px">3次</td>
              <td class="member_zuanshi" style="width: 114px">5次</td>
            </tr>
          </table>
          <table border="1" width="1120px" style="margin-top: 10px; table-layout: fixed">
            <tr style="text-align: center">
              <th rowspan="4" style="width: 130px">标书服务<br />（4项）</th>
              <td style="width: 239px">01.代写标书</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high" style="width: 114px">---</td>
              <td class="member_vip" style="width: 114px">1次</td>
              <td class="member_baijin" style="width: 114px">2次</td>
              <td class="member_zuanshi" style="width: 114px">5次</td>
            </tr>
            <tr style="text-align: center">
              <td>02.标书审核</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.部分标书下载</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">04.标书编制咨询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
          </table>
          <table border="1" width="1120px" style="margin-top: 10px; table-layout: fixed">
            <tr style="text-align: center">
              <th rowspan="13" style="width: 130px">数据服务<br />（13项）</th>
              <td style="width: 239px">01.数据信息定制</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>02.政府采购中心查询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.工程建设交易中心查询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>04.业主采购单位查询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>05.设计研究单位查询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>06.招标代理机构查询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>07.招投标法律法规查询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>08.历史招中标数据查询</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>09.历史招中标数据导出</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">1500条（2次）</td>
              <td class="member_vip">1500条（3次）</td>
              <td class="member_baijin">1500条（4次）</td>
              <td class="member_zuanshi">1500条（5次）</td>
            </tr>
            <tr style="text-align: center">
              <td>10.招标区域密度分析</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>11.竞争对手实时监测</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>12.竞争对手分析报告</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">季度报告（2份）</td>
              <td class="member_baijin">季度报告（4份）</td>
              <td class="member_zuanshi">季度报告（6份）</td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">13.招投标数据行业报告</td>
              <td class="member_normal active_color" style="width: 114px">
                另收费
              </td>
              <td class="member_high" style="width: 114px">另收费</td>
              <td class="member_vip" style="width: 114px">另收费</td>
              <td class="member_baijin" style="width: 114px">另收费</td>
              <td class="member_zuanshi" style="width: 114px">一个行业</td>
            </tr>
          </table>
          <table border="1" width="1120px" style="margin-top: 10px; table-layout: fixed">
            <tr style="text-align: center">
              <th rowspan="9" style="width: 130px">售后服务<br />（9项）</th>
              <td style="width: 239px">01.专属人工客服</td>
              <th class="member_normalss active_color">1v1</th>
              <td class="member_high">1v1 资深</td>
              <td class="member_vip">1v1 VIP</td>
              <td class="member_baijin">2v1 VIP</td>
              <td class="member_zuanshi">2v1 金牌</td>
            </tr>
            <tr style="text-align: center">
              <td>02.关键词定制</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.电话通知</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>04.邮件提醒</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>05.微信推送</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>06.短信提醒</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>07.单条内容导出</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>08.APP手机端</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">09.项目个性化定制</td>
              <td class="member_normal active_color" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
          </table>
          <table border="1" width="1120px" style="margin-top: 10px; table-layout: fixed">
            <tr style="text-align: center">
              <th rowspan="6" style="width: 130px">
                商机人脉
                <br />
                （6项）
              </th>
              <td style="width: 239px">01.指定业主监控</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>02.指定项目监控</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.重点项目专盯</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">5个</td>
              <td class="member_vip">10个</td>
              <td class="member_baijin">20个</td>
              <td class="member_zuanshi">50个</td>
            </tr>
            <tr style="text-align: center">
              <td>04.向业主方推荐</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>05.向业主唯一推荐</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">06.中标企业信息查询</td>
              <td class="member_normal active_color" style="width: 114px">
                ---
              </td>
              <td class="member_high" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
          </table>
          <table border="1" width="1120px" style="margin-top: 10px; table-layout: fixed">
            <tr style="text-align: center">
              <th rowspan="9" style="width: 130px">口碑提升<br />（9项）</th>
              <td style="width: 239px">01.首页标王推荐</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">1个月</td>
              <td class="member_vip">2个月</td>
              <td class="member_baijin">3个月</td>
              <td class="member_zuanshi">6个月</td>
            </tr>
            <tr style="text-align: center">
              <td>02.名企访谈</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.优秀供应商首页推荐</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">1个月</td>
              <td class="member_baijin">3个月</td>
              <td class="member_zuanshi">6个月</td>
            </tr>
            <tr style="text-align: center">
              <td>04.加入优秀供应商库</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>05.中标喜讯展示</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>06.图片企业展厅</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>07.企业网站建设（模板）</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">---</td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>08.首页横幅广告</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">1个月分站</td>
              <td class="member_vip">3个月分站</td>
              <td class="member_baijin">6个月分站</td>
              <td class="member_zuanshi">8个月分站</td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">09.微信公众号推广</td>
              <td class="member_normal active_color" style="width: 114px">
                ---
              </td>
              <td class="member_high" style="width: 114px">---</td>
              <td class="member_vip" style="width: 114px">1期图文</td>
              <td class="member_baijin" style="width: 114px">2期图文</td>
              <td class="member_zuanshi" style="width: 114px">6期图文</td>
            </tr>
          </table>
          <table border="1" width="1120px" style="margin-top: 10px; table-layout: fixed">
            <tr style="text-align: center">
              <th rowspan="7" style="width: 130px">产品推广<br />（7项）</th>
              <td style="width: 239px">01.集中采购</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>02.发布信息</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.企业电子样本发布</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">1本</td>
              <td class="member_baijin">3本</td>
              <td class="member_zuanshi">5本</td>
            </tr>
            <tr style="text-align: center">
              <td>04.图片网络广告</td>
              <th class="member_normalss active_color">共享1个月</th>
              <td class="member_high">共享2个月</td>
              <td class="member_vip">独享1个月</td>
              <td class="member_baijin">独享3个月</td>
              <td class="member_zuanshi">独享6个月</td>
            </tr>
            <tr style="text-align: center">
              <td>05.关键词广告</td>
              <th class="member_normalss active_color">1个月/2词</th>
              <td class="member_high">2个月/3词</td>
              <td class="member_vip">3个月/5词</td>
              <td class="member_baijin">6个月/8词</td>
              <td class="member_zuanshi">一年/12词</td>
            </tr>
            <tr style="text-align: center">
              <td>06.邮件集群定制广告</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">---</td>
              <td class="member_baijin">3万封（一次）</td>
              <td class="member_zuanshi">5万封（一次）</td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">07.线下展示推广</td>
              <td class="member_normal active_color" style="width: 114px">
                ---
              </td>
              <td class="member_high" style="width: 114px">---</td>
              <td class="member_vip" style="width: 114px">---</td>
              <td class="member_baijin" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
          </table>
          <table border="1" width="1120px" style="margin-top: 10px; table-layout: fixed">
            <tr style="text-align: center">
              <th rowspan="7" style="width: 130px">认证服务<br />（7项）</th>
              <td style="width: 239px">01.招标与采购网认证</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>02.招投标诚信认证</td>
              <td class="member_normalss active_color">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_high">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_vip">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_baijin">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td>03.诚信供应商认证</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">1本</td>
              <td class="member_baijin">3本</td>
              <td class="member_zuanshi">5本</td>
            </tr>
            <tr style="text-align: center">
              <td>04.投标资质完善指导</td>
              <th class="member_normalss active_color">共享1个月</th>
              <td class="member_high">共享2个月</td>
              <td class="member_vip">独享1个月</td>
              <td class="member_baijin">独享3个月</td>
              <td class="member_zuanshi">独享6个月</td>
            </tr>
            <tr style="text-align: center">
              <td>05.AAA企业信用评级</td>
              <th class="member_normalss active_color">1个月/2词</th>
              <td class="member_high">2个月/3词</td>
              <td class="member_vip">3个月/5词</td>
              <td class="member_baijin">6个月/8词</td>
              <td class="member_zuanshi">一年/12词</td>
            </tr>
            <tr style="text-align: center">
              <td>06.政采优秀供应商认证</td>
              <th class="member_normalss active_color">---</th>
              <td class="member_high">---</td>
              <td class="member_vip">---</td>
              <td class="member_baijin">3万封（一次）</td>
              <td class="member_zuanshi">5万封（一次）</td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px">07.体系认证</td>
              <td class="member_normal active_color" style="width: 114px">
                ---
              </td>
              <td class="member_high" style="width: 114px">---</td>
              <td class="member_vip" style="width: 114px">---</td>
              <td class="member_baijin" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
              <td class="member_zuanshi" style="width: 114px">
                <img src="../../assets/img/路径 29@2x.png" alt="" />
              </td>
            </tr>
            <tr style="text-align: center">
              <td style="width: 205px; font-size: 14px" colspan="7">
                <strong>招标与采购网特别提示：
                  <img src="../../assets/img/路径 29@2x.png" alt="" />
                  标记为可以提供服务， --- 标记为不享受此功能</strong>
              </td>
            </tr>
          </table>
          <div class="table-top">中国招标与采购网高端定制服务</div>
          <table border="1" width="1120px" style="table-layout: fixed">
            <tr style="text-align: center; height: 30px">
              <th rowspan="6" style="width: 130px">企信通</th>
              <td style="width: 246px">企业资质查询</td>
              <td style="
                  color: #347aea;
                  font-weight: bold;
                  cursor: pointer;
                  width: 180px;
                " lay-on="mianyi">
                面议
              </td>
              <td rowspan="16" style="font-weight: bold; width: 130px">
                投<br />
                标<br />
                加<br />
                分<br />
                证<br />
                书
              </td>
              <td style="width: 253px">ISO9001质量管理体系认证</td>
              <td style="
                  color: #347aea;
                  width: 180px;
                  font-weight: bold;
                  cursor: pointer;
                " lay-on="mianyi">
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF">人员资格查询</td>
              <td class="EFF6FF" style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
              <td class="EFF6FF">ISO14001环境管理体系认证</td>
              <td class="EFF6FF" style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td>企业奖惩查询</td>
              <td style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
              <td>ISO45001职业健康安全管理体系认证</td>
              <td style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF">中标业绩查询</td>
              <td class="EFF6FF" style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
              <td class="EFF6FF">ISO20000信息技术服务管理体系认证</td>
              <td class="EFF6FF" style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td>经营风险查询</td>
              <td style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
              <td>ISO27001信息安全管理体系认证</td>
              <td style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF">业绩报告下载</td>
              <td class="EFF6FF" style="
                  width: 130px;
                  color: #347aea;
                  font-weight: bold;
                  cursor: pointer;
                " lay-on="mianyi">
                面议
              </td>
              <td class="EFF6FF">ISO22000食品安全管理体系认证</td>
              <td class="EFF6FF" style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
            </tr>
            <tr style="text-align: center; height: 30px">
              <th rowspan="6" style="width: 130px">标训圈</th>
              <td>招投标技能企业内训</td>
              <td style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                1968元/人/次
              </td>
              <td>GB/T31950企业诚信管理体系认证</td>
              <td style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF">投标实战100问培训</td>
              <td class="EFF6FF" style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                4800元/人/次
              </td>
              <td class="EFF6FF">SA8000社会责任标准管理体系认证</td>
              <td class="EFF6FF" style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td>控标技巧特训营培训</td>
              <td style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                4800元/人/次
              </td>
              <td>GB/T 35770合规管理体系认证</td>
              <td style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF">满分投标文件编制培训</td>
              <td class="EFF6FF" style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                4800元/人/次
              </td>
              <td class="EFF6FF">商品售后服务体系认证（五星）</td>
              <td class="EFF6FF" style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td>投标全流程法律解析培训</td>
              <td style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                4800元/人/次
              </td>
              <td>售后服务体系完善程度认证（七星）</td>
              <td style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF">投诉/质疑/异议处理技能培训</td>
              <td class="EFF6FF" style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                4800元/人/次
              </td>
              <td class="EFF6FF">信用中国信用修复</td>
              <td class="EFF6FF" style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <th rowspan="4" style="width: 130px">招投标大数据</th>
              <td>API接口同步对接</td>
              <td style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
              <td>AAAA标准化等级证书</td>
              <td style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF">招中标数据汇总导出</td>
              <td class="EFF6FF" style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
              <td class="EFF6FF">AAA级重合同守信用证书</td>
              <td class="EFF6FF" style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td>招投标数据分析报告</td>
              <td style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
              <td>AAA级企业信用等级证书</td>
              <td style="color: #347aea; font-weight: bold; cursor: pointer" lay-on="mianyi">
                面议
              </td>
            </tr>

            <tr style="text-align: center; height: 30px">
              <td class="EFF6FF" style="width: 200px">招投标大数据会员</td>
              <td class="EFF6FF" style="
                  width: 120px;
                  color: #347aea;
                  font-weight: bold;
                  cursor: pointer;
                ">
                面议
              </td>
              <td class="EFF6FF" style="width: 220px">AAA级企业资信等级证书</td>
              <td class="EFF6FF" style="
                  width: 100px;
                  color: #347aea;
                  font-weight: bold;
                  cursor: pointer;
                ">
                面议
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <Fot style="margin-top: 30px"></Fot>
  </div>

  <!--  -->
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { timestamp, timestamp1 } from "@/utils/index";
import { useCounterStore } from "@/pain/login/login";
const store = useCounterStore();
import {
  memberPrice,
  memberPrices,
  weChatPayment,
  testVerify,
  contact_img,
  complete,
} from "../../Api/complete/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import QrcodeVue from "qrcode.vue";
import Fot from "../../components/fotter/index.vue";
const dialogVisible = ref(false);

const citys = (event) => {
  var a = null;
  options.forEach((element) => {
    if (element.value == event) {
      a = element.label;
    }
  });
  return a;
};

const memberList = reactive([]);
const name1 = ref();
const name2 = ref();
const name3 = ref();
const name4 = ref();
//会员名称
complete().then((res) => {
  res.data.data.forEach((item, index) => {
    if (item.id !== 1) {
      memberList.push(item);
    }
  });
  name1.value = memberList[0].name;
  name2.value = memberList[1].name;
  name3.value = memberList[2].name;
  name4.value = memberList[3].name;
});
//客服微信
const kfimg = ref("");
contact_img().then((res) => {
  if (res.data.code == 1) {
    // console.log(res.data);
    kfimg.value = "https://api.6ocbx.com/" + res.data.data.img;
  } else {
    ElMessage.error(res.data.msg);
  }
});

const actives = ref(2);
const props = { multiple: true };
const actives1 = ref();

const router = useRouter();
const memberPrice1 = ref("680"); //价格
const memberPrice2 = ref("3499"); //价格
const memberPrice3 = ref("680"); //价格
const memberPrice4 = ref("3499"); //价格
//到期时间
// const currentTime = new Date().getTime()/1000;
// const currentTime1 = new Date().getTime()/1000;
// timestamp(currentTime),

// console.log(timestamp(getNextMonthDate("1711848736")));
// var today = new Date();
// var asd = "1711848736"
// var nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate()).getTime()/1000;
// console.log(timestamp(nextMonth));
//跳转支付
const JumpPayment = () => {
  // console.log(radio2.value);
  let token = localStorage.getItem('token')
  if (!token) {
    return store.uselogin = true;
  }
  const amount1 = ref();
  // console.log(amount);
  if (active1.value == "s") {
    amount1.value = memberPrice3.value - amount.value;
    // console.log(amount1.value);
  } else {
    amount1.value = memberPrice4.value - amount.value;
  }
  // console.log(type1.value);
  if (radio2.value == 1) {
    const href = router.resolve({
      path: "/Payment",
      query: {
        city: cityList.value,
        time: expirationTime.value,
        amount: amount1.value,
        yue: radio1.value,
        digit: digit.value,
        vipType: actives.value,
        rid: rid.value,
        type: active1.value,
      },
    });
    window.open(href.href, "_blank");
  } else {
    ElMessage.error("请勾选同意《中国招标与采购网会员服务协议》");
  }
};
const Jumpxy = () => {
  const href = router.resolve({
    path: "/agreement",
  });
  window.open(href.href, "_blank");
  // window.open(`http://www.6ocbx.com/agreement`, "_blank");
};
const actualPayment = ref(0); //实付金额
const imgList = reactive([
  { url: new URL(`../../assets/img/3.png`, import.meta.url).href, id: 2 },
  { url: new URL(`../../assets/img/2.png`, import.meta.url).href, id: 3 },
  {
    url: new URL(`../../assets/img/蒙版组 4@2x.png`, import.meta.url).href,
    id: 4,
  },
  {
    url: new URL(`../../assets/img/蒙版组 5@2x.png`, import.meta.url).href,
    id: 5,
  },
  {
    url: new URL(`../../assets/img/蒙版组 6@2x.png`, import.meta.url).href,
    id: 6,
  },
]);

// 生成微信二维码
// 验证劵
const input = ref(""); //输入框
const amount = ref(0);
const coupons = ref(); //
const clientid = ref("1");
const xianshi = ref(2);
// const code = ref()
const postPrice = () => {
  const form = reactive({
    clientid: clientid,
    code: input,
  });
  testVerify(form).then((res) => {
    if (res.data.code == 1) {
      xianshi.value = 1;
      amount.value = res.data.data.money;
      actualPayment.value = (pay_price.value - amount.value).toFixed(2);
      // ElMessage.error(res.data.msg);
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

//省份
const city = ref();
// const cityList = ref("安徽")
// const cityList = ref()
const cityList = ref(["340000"]);
const digit = ref("1");
const radio1 = ref(1);
const radio2 = ref();
const prices = ref();

const options = [
  {
    value: "110000",
    label: "北京",
  },
  {
    value: "120000",
    label: "天津",
  },
  {
    value: "310000",
    label: "上海",
  },
  {
    value: "500000",
    label: "重庆",
  },
  {
    value: "130000",
    label: "河北",
  },
  {
    value: "410000",
    label: "河南",
  },
  {
    value: "370000",
    label: "山东",
  },
  {
    value: "140000",
    label: "山西",
  },
  {
    value: "610000",
    label: "陕西",
  },
  {
    value: "150000",
    label: "内蒙古",
  },
  {
    value: "210000",
    label: "辽宁",
  },
  {
    value: "220000",
    label: "吉林",
  },
  {
    value: "230000",
    label: "黑龙江",
  },
  {
    value: "320000",
    label: "江苏",
  },
  {
    value: "330000",
    label: "浙江",
  },
  {
    value: "340000",
    label: "安徽",
  },
  {
    value: "420000",
    label: "湖北",
  },
  {
    value: "430000",
    label: "湖南",
  },
  {
    value: "360000",
    label: "江西",
  },
  {
    value: "350000",
    label: "福建",
  },
  {
    value: "440000",
    label: "广东",
  },
  {
    value: "460000",
    label: "海南",
  },
  {
    value: "450000",
    label: "广西",
  },
  {
    value: "520000",
    label: "贵州",
  },
  {
    value: "530000",
    label: "云南",
  },
  {
    value: "510000",
    label: "四川",
  },
  {
    value: "620000",
    label: "甘肃",
  },
  {
    value: "640000",
    label: "宁夏",
  },
  {
    value: "650000",
    label: "新疆",
  },
  {
    value: "630000",
    label: "青海",
  },
  {
    value: "540000",
    label: "西藏",
  },
  {
    value: "810000",
    label: "香港",
  },
  {
    value: "820000",
    label: "澳门",
  },
  {
    value: "710000",
    label: "台湾",
  },
];
const options1 = [
  {
    value: "1",
    label: "1",
  },
  {
    value: "2",
    label: "2",
  },
  {
    value: "3",
    label: "3",
  },
];
//添加省份
const changeCity = () => {
  var a = (cityList.value.length - 1) * Membership.value * digit.value;
  if (a < 0) {
    a = 0;
  }
  memberPrice3.value = Number(memberPrice1.value) + a;
};
//
const changeTheme = (event) => {
  cityList.value = ["340000"];
  radio1.value = event;
  postMemberPrice();
  vip111();
  dqTime();
  digit.value = 1;
};
const changeTheme1 = (event) => {
  dqTime();

  if (active1.value == "s" && radio1.value == 1) {
    postMemberPrice()
    var a = danyue.value + (Membership.value * (cityList.value.length - 1))
    memberPrice3.value = a * event
    // memberPrice3.value = prices.value * event;
  } else if (active1.value == "q" && radio1.value == 1) {
    console.log(radio1.value, "yue");
    memberPrice4.value = danyue1.value * event
  } else {
    postMemberPrice()
  }
};
const time = (event) => {
  const a = ref();
  if (event == 1) {
    a.value = "月";
  } else {
    a.value = "年";
  }
  return a.value;
};
const expirationTime = ref();

const dqTime = () => {
  if (radio1.value == 1) {
    const getNextMonthDate = () => {
      // console.log(typeof digit.value);
      var a = parseInt(digit.value);
      var today = new Date();
      var nextMonth = new Date(
        today.getFullYear(),
        today.getMonth() + a,
        today.getDate()
      );
      return nextMonth;
    };
    var b = getNextMonthDate();
    var c = b.getTime();
    // console.log(b, c);
    expirationTime.value = c / 1000;
  } else if (radio1.value == 2) {
    const getNextMonthDate = () => {
      // console.log(typeof digit.value);
      var a = parseInt(digit.value);
      var today = new Date();
      var nextMonth = new Date(
        today.getFullYear() + a,
        today.getMonth(),
        today.getDate()
      );
      return nextMonth;
    };
    var b = getNextMonthDate();
    var c = b.getTime();
    // console.log(b, c);
    expirationTime.value = c / 1000;
  }
};
dqTime();
// const Mem
const Membership = ref();
const huiyuanJd = ref();
const huiyuanJd1 = ref();
const huiyuanJd2 = ref();
const huiyuanJd3 = reactive([]);
//会员添加省份的价钱
const vip111 = () => {
  // console.log(huiyuanJd3.value);
  if (radio1.value == 1) {
    if (actives.value == 2) {
      Membership.value = huiyuanJd3.value.m[2];
    } else if (actives.value == 3) {
      Membership.value = huiyuanJd3.value.m[3];
    } else if (actives.value == 4) {
      Membership.value = huiyuanJd3.value.m[4];
    }
  } else {
    if (actives.value == 2) {
      Membership.value = huiyuanJd3.value.y[2];
    } else if (actives.value == 3) {
      Membership.value = huiyuanJd3.value.y[3];
    } else if (actives.value == 4) {
      Membership.value = huiyuanJd3.value.y[4];
    }
  }
  console.log(Membership.value);
};
const vip_jag = () => {
  memberPrice().then((res) => {
    if (res.data.code == 1) {
      huiyuanJd3.value = res.data.data;
      huiyuanJd.value = res.data.data.m[2];
      huiyuanJd1.value = res.data.data.m[3];
      huiyuanJd2.value = res.data.data.m[4];
      vip111();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
vip_jag();
// console.log( Membership.value);
// 会员购买对应的价格
const hyList = reactive({});
const rid = ref();
const gaoji1 = ref();
const Vip1 = ref();
const putong1 = ref();
const gaoji2 = ref();
const Vip2 = ref();
const putong2 = ref();
//高级版缩小显示的价格
const gaoji = () => {
  const from1 = reactive({
    level_id: 3,
  });
  memberPrices(from1).then((res) => {
    gaoji1.value = Math.floor(res.data.data[1].price);
    gaoji2.value = Math.floor(res.data.data[0].price);
  });
};
//VIP版缩小显示的价格
const VIP = () => {
  const from1 = reactive({
    level_id: 4,
  });
  memberPrices(from1).then((res) => {
    Vip1.value = Math.floor(res.data.data[1].price);
    Vip2.value = Math.floor(res.data.data[0].price);
  });
};
//标准版缩小显示的价格
const putong = () => {
  const from1 = reactive({
    level_id: 2,
  });
  memberPrices(from1).then((res) => {
    putong1.value = Math.floor(res.data.data[1].price);
    putong2.value = Math.floor(res.data.data[0].price);
  });
};
gaoji();
VIP();
putong();
const danyue1 = ref();
const danyue = ref();
const postMemberPrice = () => {
  const from1 = reactive({
    level_id: actives.value,
  });
  memberPrices(from1).then((res) => {
    if (res.data.code == 1) {
      hyList.value = res.data.data;
      var a = null;
      if (radio1.value == 1) {
        a = "m";
      } else {
        a = "y";
      }
      var prices111 = null
      //  console.log(digit.value);
      res.data.data.forEach((item) => {
        if (item.num == 1 && item.type == "q" && item.unit == "m") {
          memberPrice4.value = Math.floor(item.price);
          danyue1.value = Math.floor(item.price);
        }
        if (item.num == 1 && item.type == "s" && item.unit == "m") {
          danyue.value = Math.floor(item.price);
        }
        if (active1.value == "s") {
          // console.log("888");
          if (
            item.num == digit.value &&
            item.type == active1.value &&
            item.unit == a
          ) {
            // console.log(item.id);
            var ccc = cityList.value.length - 1
            rid.value = item.id;
            memberPrice3.value = Math.floor(item.price + ccc * 100);
            memberPrice1.value = Math.floor(item.price + ccc * 100);
            prices.value = Math.floor(item.price + ccc * 100);

          } else if (item.num == 1 && item.type == "s" && item.unit == "m") {
            rid.value = item.id;
            prices111 = item.price
          } else {
            // console.log(8787888);
            // console.log(memberPrice3.value);
            //   if (cityList.value.length!==1) {
            //   var ccc = cityList.value.length-1
            //   memberPrice3.value = Math.floor(prices111+ccc*100);
            //   memberPrice1.value = Math.floor(prices111+ccc*100);
            //   prices.value = Math.floor(prices111+ccc*100);
            // }
          }
        } else if (active1.value == "q") {
          if (
            item.num == digit.value &&
            item.type == active1.value &&
            item.unit == a
          ) {
            // console.log(item.num,digit.value,item.type,active1.value,item.unit,a);
            var ccc = cityList.value.length - 1
            rid.value = item.id;
            memberPrice4.value = Math.floor(item.price + ccc * 100);
            memberPrice1.value = Math.floor(item.price + ccc * 100);
            prices.value = Math.floor(item.price + ccc * 100);
          } else {
            console.log("88");
          }
          //  else if (item.num == 1 && item.type == "q" && item.unit == "m") {
          //   console.log("88");
          //   rid.value = item.id;
          //   // memberPrice4.value = Math.floor(item.price);
          //   // memberPrice1.value = Math.floor(item.price);
          //   // prices.value = Math.floor(item.price);
          // }
          // else if (item.num == 2 && item.type == "q" && item.unit == "m") {
          //   rid.value = item.id;
          //   console.log("9999");
          //   memberPrice4.value = Math.floor(item.price*2);
          //   memberPrice1.value = Math.floor(item.price*2);
          //   prices.value = Math.floor(item.price*2);
          // }
        }
        // console.log(item.price[0]);
        // var ccc = cityList.value.length-1
        //     rid.value = item.id;
        //     memberPrice3.value = Math.floor(item[0].price+ccc*100);
        // memberPrice1.value = Math.floor(item.price+ccc*100);
        // prices.value = Math.floor(item.price+ccc*100);
      });
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
postMemberPrice();
//立即购买
const purchase = (event) => {
  if (pay_price.value == 0) {
    ElMessage.error("请选择您的会员标准");
  } else if (active1.value == 0) {
    ElMessage.error("请选择您的支付方式");
  } else {
    if (active1.value == 40) {
      postWxPrice();
    } else if (condition) {
      // 支付宝支付
    } else {
      // 对公账户
    }
  }
};
// 微信支付
// const price = reactive([])//会员价格
const weChatPaymentCode = ref();
const postWxPrice = () => {
  const form = reactive({
    clientid: "1",
    level_id: level_id.value,
    rid: rid.value,
    pay_price: pay_price.value,
  });
  axios
    .post(
      "https://api.6ocbx.com/pay/wechat?clientid=1&level_id=2&rid=2&pay_price=3000.00"
    )
    .then((res) => {
      weChatPaymentCode.value = res.data.data.code_url;
      // getQRInviteCode()
      dialogVisible.value = true;
      console.log(weChatPaymentCode.value);
    });
  // weChatPayment(form).then((res) => {
  //   if (res.data.code==1) {
  //   }else{
  //     ElMessage.error(res.data.msg)
  //   }
  //   });
};
watch(router, (to, from) => {
  router.go(0);
});
const radio = ref("0");
const active = ref(0);
// const active1 = ref("s");
const active1 = ref("q");
const activeName = ref("标准会员"); //默认标准会员
const memberId = ref(0);
const level_id = ref(0);
// const rid = ref(0);
const pay_price = ref(0);
const disabled = ref(true);
const beifen = ref()
const changeStatus = (number) => {
  digit.value = 1;
  active1.value = number;
  // cityList.value = beifen.value
  if (number == "q") {
    disabled.value = "true";

    // cityList.value = [];
  } else {
    disabled.value = false;
    // cityList.value = ["340000"];
  }
  // level_id.value = number.level_id;
  // rid.value = number.id;
  // pay_price.value = number.price;
  // actualPayment.value = number.price;
};

const changeStatus1 = (number) => {
  if (number == actives.value) {
    // postMemberPrice();
  } else {
    actives.value = number;
    cityList.value = ["340000"];
    radio1.value = 1;
    digit.value = "1";
    postMemberPrice();
    vip111();
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}

.mainBody {
  width: 1200px;
  // height: 5000px;
  // background-color: #fff;
  margin: 0 auto;
}

.box-top {
  height: 38px;
  font-size: 38px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 38px;
  color: #f43107;
  opacity: 1;
  text-align: center;
  padding-top: 50px;
}

.box-bj {
  width: 100%;
  height: 282px;
  background: url("../../assets/img/蒙版组\ 367.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
}

.vip {
  display: flex;
  width: 1200px;
  margin: 0 auto;
}

.vip .checked {
  width: 550px;
  height: 780px;
  background: #fff;
  box-shadow: 0px 10px 20px rgba(112, 112, 112, 0.08);
  opacity: 1;
  border-radius: 20px;
  margin-top: -144px;
  margin-right: 17px;

  .zuan {
    width: 42px;
    height: 42px;
    margin-right: 6px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .title {
    height: 38px;
    font-size: 38px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 42px;
    color: #713200;
    opacity: 1;
  }

  .exclusive {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 16px;
    color: #713200;
    opacity: 1;
    text-align: center;
    margin-top: 12px;
  }
}

.zuan {
  width: 32px;
  height: 32px;
  margin-right: 10px;

  img {
    width: 100%;
    height: 100%;
  }
}

.title {
  height: 28px;
  font-size: 28px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 28px;
  color: #713200;
  opacity: 1;
}

.exclusive {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 14px;
  color: #713200;
  opacity: 1;
  text-align: center;
  margin-top: 12px;
}

.vip-top1 {
  width: 100%;
  height: 144px;
  background: url("../../assets/img/组 5797@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
}

.vip-top2 {
  width: 100%;
  height: 100px;
  background: url("../../assets/img/组 5809@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
}

.vip-top3 {
  width: 100%;
  height: 144px;
  background: url("../../assets/img/组 5805@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
}

.vip-top4 {
  width: 100%;
  height: 100px;
  background: url("../../assets/img/组 5808@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
}

.vip-top5 {
  width: 100%;
  height: 144px;
  background: url("../../assets/img/组 5806@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
}

.vip-top6 {
  width: 100%;
  height: 100px;
  background: url("../../assets/img/组 5811@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
}

.vip-top7 {
  width: 100%;
  height: 144px;
  background: url("../../assets/img/组 5807@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
}

.vip-top8 {
  width: 100%;
  height: 100px;
  background: url("../../assets/img/组 5810@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
}

.vip-1 {
  width: 200px;
  height: 350px;
  background: #fff;
  box-shadow: 0px 10px 20px rgba(112, 112, 112, 0.08);
  opacity: 1;
  border-radius: 20px;
  margin-top: -100px;
  margin-right: 17px;
  // display: flex;
}

.radio {
  width: 100%;
  padding: 20px;
}

.qian {
  width: 250px;
  height: 90px;
  background: #ffffff;
  border: 1px solid #dddddd;
  opacity: 1;
  border-radius: 8px;
  position: relative;
  margin: 0 auto;
}

.qian-s {
  width: 100%;
  height: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.qian-1 {
  font-size: 20px;
  font-family: DIN Alternate;
  font-weight: bold;
  line-height: 20px;
  color: #ff4848;
  opacity: 1;
}

.qian-2 {
  font-size: 34px;
  font-family: DIN Alternate;
  font-weight: bold;
  line-height: 20px;
  color: #ff4848;
  opacity: 1;
}

.qian-3 {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #a9b1be;
  opacity: 1;
}

.qian-ss {
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #fe8d03;
  opacity: 1;
  text-align: center;
  margin-top: 10px;
}

.checkeds {
  background: #fffbf4;

  .Selected {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px !important;
    height: 28px !important;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.Selected {
  width: 28px;
  height: 28px;
  // display: none;
  position: absolute;
  bottom: 0;
  right: 0;

  img {
    width: 0;
    height: 0;
  }
}

.content-left {
  width: 100%;
  margin-top: 15px;
}

.content-1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  white-space: pre-wrap;
  font-size: 14px;
  margin-top: 15px;
}

.content-2 {
  width: 100%;
  // display: flex;
  // justify-content: space-between;
  font-size: 14px;
  margin-top: 15px;
}

.city-1 {
  width: 70px;
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 14px;
  color: #333333;
  display: inline-block;
}

.city-2 {
  width: 420px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 14px;
  color: #333333;
  display: flex;
  flex-wrap: wrap;
  display: inline-block;
}

.city-2 {
  float: right;
}

.city-2 {
  width: 50px;
  // text-align: right;
}

.city-4 {
  width: 230px;
}

.m-3 {
  margin-left: 20px;
  width: 78px !important;
}

.w-50 {
  width: 158px;
  height: 40px;
}

.qd {
  width: 62px;
  height: 40px;
  background: #f43107;
  opacity: 1;
  border-radius: 0px 4px 4px 0px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}

.activate {
  width: 550px;
  margin-top: 34px;

  .el-button {
    width: 220px;
    height: 36px;
    background: #fbd7a1;
    opacity: 1;
    border-radius: 4px;
    margin-left: 145px;
  }
}

.agree {
  display: flex;
  margin-left: 108px;
}

.kait {
  width: 150px;
  height: 36px;
  background: #fbd7a1;
  opacity: 1;
  border-radius: 4px;
  color: #ffffff;
  margin: 60px 25px;
}

.kait:hover {
  width: 150px;
  height: 36px;
  background: #fbd7a1;
  opacity: 1;
  border-radius: 4px;
  margin: 60px 25px;
  color: #ffffff;
}

.kait2 {
  width: 150px;
  height: 36px;
  background: #f43107;
  opacity: 1;
  border-radius: 4px;
  color: #ffffff;
  margin: 60px 25px;
}

.kait2:hover {
  width: 150px;
  height: 36px;
  background: #f43107;
  opacity: 1;
  border-radius: 4px;
  margin: 60px 25px;
  color: #ffffff;
}

.kait3 {
  width: 150px;
  height: 36px;
  background: #f57c3c;
  opacity: 1;
  border-radius: 4px;
  color: #ffffff;
  margin: 60px 25px;
}

.kait3:hover {
  width: 150px;
  height: 36px;
  background: #f57c3c;
  opacity: 1;
  border-radius: 4px;
  margin: 60px 25px;
  color: #ffffff;
}

.kf {
  width: 100px;
  height: 100px;

  img {
    width: 100%;
    height: 100%;
  }
}

.kf-1 {
  // width: 96px;
  height: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #713202;
  text-align: center;
  margin-top: 110px;
  // line-height: 61px;
}

.kf-2 {
  // width: 96px;
  height: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #713202;
  text-align: center;
  margin-top: 120px;
  // line-height: 61px;
}

.kfimg {
  width: 300px;
  height: 300px;

  img {
    width: 100%;
    height: 100%;
    margin-left: 100px;
    margin-top: 100px;
  }
}

// .ml-[4px]{
//  margin-left: 20px;
// }
// .el-cascader{
//   width:220px;
// }
// .el-select{
//   width:220px;
//   display:flex;
// }
// .el-popper {
//   width:600px;
//   display: flex;
// }
// .el-cascader-node{
//   width: 70px;
//   padding: 0;
// }
// .city{
//   display: flex;
//   flex-wrap: wrap;
//   width:420px;
// }
//开通会员页面
// .memberships {
//   padding: 70px 0 0 0;
//   width: 1160px;
// }

// .el-tabs__content {
//   width: 1160px;
//   box-sizing: border-box;
// }

// .el-tabs--card > .el-tabs__header {
//   border: none !important;
//   margin-left: 40px;
// }

// .demo-tabs {
//   height: 240px;
// }

// .el-tabs__header .is-top {
//   height: 60px;
//   line-height: 40px;
//   border: none !important;
// }

// .el-tabs__item.is-active {
//   width: 180px;
//   height: 60px;
//   background: linear-gradient(225deg, #fbcf89 0%, #efd6a8 100%);
//   opacity: 1;
//   border-radius: 8px 8px 0px 0px;
//   margin-top: 0;
// }

// .el-tabs__item {
//   width: 180px;
//   padding: 0;
//   background: linear-gradient(180deg, #515151 0%, #4c4c4c 52%, #3a3a3a 100%);
//   opacity: 1;
//   border-radius: 8px 8px 0px 0px;
//   box-sizing: border-box;
//   margin-top: 20px;
//   padding-top: 0px;
// }

// #tab-second {
//   padding: 0;
// }

// .custom-tabs-label {
//   display: flex;

//   span {
//     width: 100px;
//     text-align: left;
//     margin-top: -20px;
//   }

//   .hy {
//     margin-left: 35px;
//     margin-top: -20px;
//     width: 20px;
//     height: 20px;

//     img {
//       width: 20px;
//       height: 20px;
//     }
//   }
// }

// // .is-active .custom-tabs-label {
// //   font-size: 22px;
// //   font-family: Source Han Sans CN;
// //   font-weight: bold;
// //   line-height: 60px;
// //   margin-left: -20px;
// //   color: #6d4315;

// //   span {
// //     width: 100px;
// //     text-align: left;
// //     margin-top: 0px;
// //   }

// //   .hy {
// //     width: 32px;
// //     height: 30px;
// //     margin-top: -4px;

// //     img {
// //       width: 100%;
// //       height: 100%;
// //     }
// //   }
// // }

// .custom-tabs-label {
//   text-align: center;
//   font-size: 16px;
//   font-family: Source Han Sans CN;
//   font-weight: 400;
//   line-height: 40px;
//   color: #ffffff;
// }

// .sRecharge {
//   width: 1120px;
//   background: #f6f6f6;
//   opacity: 1;
//   border-radius: 0px;
//   margin-left: 40px;
//   margin-top: 5px;
// }

// .radio {
//   display: flex;
//   margin-bottom: 20px;
//   justify-content: space-between;

//   w span {
//     width: 150px;
//     font-size: 30px;
//     font-family: PingFangSC-Regular, PingFang SC;
//     font-weight: 400;
//     color: #999999;
//   }

//   .radio-span {
//     display: flex;
//     margin-left: 20px;

//     .stitle1 {
//       width: 345px;
//       height: 150px;
//       border-radius: 8px;
//       background-color: #fff;
//       margin: 30px 20px 30px 0;
//       padding: 0;
//       position: relative;
//     }

//     .checked {
//       color: #537cf5;
//       // border: 1px solid #537cf5;
//       border: 2px solid #f5d3a3;

//       .Selected {
//         position: absolute;
//         bottom: 0;
//         right: 0;
//         width: 60px !important;
//         height: 60px !important;

//         img {
//           width: 100%;
//           height: 100%;
//         }
//       }

//       .yin {
//         color: #333333;
//       }

//       .yin-y {
//         color: #d92f2f;
//       }
//       .tj {
//         width: 60px;
//         height: 26px;
//         background: #d92f2f;
//         opacity: 1;
//         border-radius: 8px 0px 8px 0px;
//         font-size: 14px;
//         font-family: Source Han Sans CN;
//         font-weight: 400;
//         line-height: 20px;
//         color: #ffffff;
//         opacity: 1;
//         text-align: center;
//       }
//     }
//   }
// }

// .yin {
//   width: 100%;
//   height: 19px;
//   font-size: 18px;
//   font-family: Source Han Sans CN;
//   font-weight: 400;
//   line-height: 0px;
//   color: #acacac;
//   opacity: 1;
//   text-align: center;
//   margin-top: 10px;
// }

// .yin-y {
//   height: 34px;

//   font-family: Source Han Sans CN;
//   font-weight: bold;
//   line-height: 0px;
//   color: #acacac;
//   opacity: 1;
//   margin-top: 20px;
//   text-align: center;
//   display: flex;
//   .ms {
//     font-size: 18px;
//     margin-left: 60px;
//   }
//   .msjia {
//     font-size: 34px;
//   }
// }
// .yjia {
//   width: 100%;
//   height: 16px;
//   font-size: 16px;
//   font-family: Source Han Sans CN;
//   font-weight: 400;
//   line-height: 0px;
//   color: #acacac;
//   opacity: 1;
//   text-align: center;
//   text-decoration: line-through;
// }
// .tj {
//   width: 60px;
//   height: 26px;
//   background: #fff;
//   opacity: 1;
//   border-radius: 8px 0px 8px 0px;
//   font-size: 14px;
//   font-family: Source Han Sans CN;
//   font-weight: 400;
//   line-height: 20px;
//   color: #ffffff;
//   opacity: 1;
//   text-align: center;
// }

// .Selected {
//   width: 60px;
//   height: 60px;
//   position: absolute;
//   bottom: 0;
//   right: 0;

//   img {
//     width: 0;
//     height: 0;
//   }
// }

.kb {
  margin-top: 20px;
  background-color: #fff;
}

.spaymentMethod {
  width: 1075px !important;
  height: 70px;
  background: #ffffff;
  border-radius: 8px;
  margin-left: 20px;
  display: flex;
  z-index: 100 !important;
  margin-top: 30px;
}

.payment {
  width: 64px;
  height: 16px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 0px;
  color: #333333;
  opacity: 1;
  margin: 35px 40px 27px 20px;
}

.Method {
  margin-right: 25px;
  width: 180px !important;
  height: 40px;
  background: #ffffff;
  border: 1px solid #dddddd;
  opacity: 1;
  border-radius: 4px;
  display: flex;
  margin-top: 15px;
  position: relative;

  .wx {
    width: 27px;
    height: 24px;
    margin: 8px 0 8px 40px;

    img {
      width: 27px;
      height: 24px;
    }
  }

  .zf {
    margin-left: 5px;
    margin-top: 10px;
  }

  .wx-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;

    img {
      width: 0;
      height: 1;
    }
  }
}

.checked1 {
  background: #fefaf2;
  border: 1px solid #f5d3a3;

  .wx-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px !important;
    height: 20px !important;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.sDeduction {
  margin-left: 20px;
  margin-top: 30px;
  display: flex;
  height: 45px;
  width: 1140px;
  position: relative;

  .el-input {
    margin-top: 10px;
    width: 250px;
    height: 40px;
  }

  .button-1 {
    margin-top: 10px;
    margin-left: 10px;
    width: 80px;
    height: 40px;
    background: #f43107;
    opacity: 1;
    border-radius: 4px;
  }

  .sbutton-2 {
    position: absolute;
    right: 60px;
    // margin-left: 10px;
    width: 180px;
    height: 60px;
    background: linear-gradient(360deg, #f43107 0%, #8995ff 51%, #f43107 100%);
    opacity: 1;
    border-radius: 4px;

    span {
      width: 88px;
      height: 22px;
      font-size: 22px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      line-height: 0px;
      color: #ffffff;
      opacity: 1;
      // margin-left:60px
    }
  }

  .successful {
    // width: 80px;
    margin-top: 28px;
    margin-left: 25px;
    margin-right: 70px;
    // width: 171px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #333333;
    opacity: 1;
  }

  .yj {
    margin-top: 28px;
    // width: 115px;
    margin-right: 15px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #acacac;
    opacity: 1;
    text-decoration: line-through;
  }

  .ssuccessful-1 {
    // width: 50px;
    margin-top: 28px;
    // margin-left: 600px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #333333;
    opacity: 1;
  }

  .ssuccessful-2 {
    // width: 100px;
    margin-top: 28px;
    margin-left: 0;
    font-size: 24px;

    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #d92f2f;
    opacity: 1;
  }
}

.memberships-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 25px;
  // padding-bottom: 40px;
  width: 1080px;
  height: 20px;
  margin: 0 auto;
  // background-color: #000;
}

// .el-radio__inner {
//   border-radius: 2px !important;
// }

// .el-radio__input.is-checked .el-radio__inner::after {
//   content: "";
//   width: 8px;
//   height: 3px;
//   border: 1px solid white;
//   border-top: transparent;
//   border-right: transparent;
//   text-align: center;
//   display: block;
//   position: absolute;
//   top: 3px;
//   left: 2px;
//   transform: rotate(-45deg);
//   border-radius: 0px;
//   background: none;
// }

.bottom-1 {
  margin-top: 17px;
  width: 256px;
  height: 16px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 0px;
  color: #d92f2f;
  opacity: 1;
}

.el-radio__label {
  display: flex;
}

.table-top {
  margin-top: 50px;
  width: 1120px;
  background-color: #f43107;
  text-align: center;
  height: 60px;
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 60px;
  color: #ffffff;
}

table,
tr,
th {
  border-collapse: collapse;
}

th {
  width: 130px !important;
}

.active_color {
  color: #347aea;
}

// .table_title {
//     display: inline-block;
//     width: 70vw;
//     height: 3.75vw;
//     background-color: #347AEA;
//     text-align: center;
//     line-height: 3.75vw;
//     font-size: 22px;
//     color: #fff;
// }

.table_wrapper2 {
  margin-top: 50px;
  margin-left: 40px;
}

.table th:nth-child(1) {
  width: 100px;
}

.member_normal {
  width: 246px !important;
  height: 60px;
  padding: 0;
  margin: 0;

  img {
    width: 18px;
    height: 14px;
  }
}

.member_normalss {
  width: 150px !important;
  height: 60px;

  img {
    width: 18px;
    height: 14px;
  }
}

.member_high {
  width: 150px !important;
  height: 60px;

  img {
    width: 18px;
    height: 14px;
  }
}

.member_vip {
  width: 150px !important;
  height: 60px;

  img {
    width: 18px;
    height: 14px;
  }
}

.member_baijin {
  width: 150px !important;
  height: 60px;

  img {
    width: 18px;
    height: 14px;
  }
}

.member_zuanshi {
  width: 150px !important;
  height: 60px;

  img {
    width: 18px;
    height: 14px;
  }
}
</style>
